<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>BankAmericard Cash Rewards credit card</title>
  <link rel="stylesheet" href="css/jquery.mobile.min.css">
  
  <!-- Extra Codiqa features -->
  	<link rel="stylesheet" href="css/codiqa.ext.css">
	<link rel="stylesheet" href="css/slider.tooltip.css" id="tooltipStyle">
	<link rel="stylesheet" href="css/Allinone.css">
    <link rel="stylesheet" href="css/creditcard.css">
  <!-- jQuery and jQuery Mobile -->
  	<script src="js/jquery-1.9.1.min.js"></script>
  	<script src="js/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  <!-- Extra Codiqa features -->
  	<script src="js/codiqa.ext.js"></script>
	<script src="js/slider.tooltip.js" id="tooltipCode"></script>
    <script src="js/creditcard.js"></script>

</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">

    <div data-theme="a" data-role="header">
        <div class="ui-grid-b bgclr">
            <div class="ui-block-a">
          	  <a href="#" data-iconpos="right" class="ui-btn-left transBack home"> <img src="images/homeBtn.png" alt="Home"> </a>
            </div>
            <div class="ui-block-b">
            	<div data-role="fieldcontain srch">
         		   <input name="" id="searchinput2" placeholder="" value="" type="search">
      			</div>
            </div>
            <div class="ui-block-c headerleft">
               <a data-role="button" href="#page1" class="ui-btn-right demos transBack">Demos</a>
               <a data-role="button" href="#page1" class="ui-btn-right learn transBack">Library</a>
            </div>
        </div>        
       
        
    </div>

    <div data-role="content">
		<div id="mask">
            <div id="maskSub"></div>
            <div id="maskText">
            <p>
            The 2% cash back on grocery purchases and 3% cash back on gas purchases applies <br />
            to the first $1,500 in combined purchases in these categories each quarter. After that, the base <br />
            1% earn rate applies to those purchases. Cash rewards redeemed into a Bank of America&reg; <br />
            checking or savings account will be 10% greater than other types of cash rewards. <br />
            For information on the rates, fees, other costs and benefits of this credit card, see associate.
            </p>
            <p>
            Credit card programs are issued and administratered by FIA Card Services, N.A. <br />
            BankAmericard Cash Rewards is a trademark and Bank of America and Bank of America <br />
            logo are registered trademarks of Bank of America Corporation.
            </p>
            <p>
            Bank of America, N.A. Member FDIC Equal Housing Lender &copy; 2013 Bank of Corporation. All <br />
            rights reserved.
            </p>
            <div id="close"></div>
            </div>
        </div>
    <div class="ui-grid-b topsidpad">
         	<h1 class="hmtitle">BankAmericard Cash Rewards<span style="" class="tmtext">TM</span> Credit Card</h1>
          
            <div class="headImg"> 
            	<div class="imagcard">
                	<a href="#"> <img src="images/card.png" alt="Card"> </a>
                </div>
                <div class="plantext">
                	<h3>Earn more cash back for the things you buy most.</h3>
                    <div class="OneperBox">
                    	<p> <span> 1<sup style="position:absolute; left:18px; top:-5px; float:left;font-size:20px;">%</sup></span><p class="comebackText"> cash  back<br/> 
                        everywhere <br />every time </p></p>
                    </div>
                    <div class="OneperBox">
                    	<p> <span> 2 <sup style="position:absolute; left:18px; top:-5px; float:left;font-size:20px;">%</sup></span><p class="comebackText"> cash  back <br/>on groceries </p></p>
                    </div>
                    <div class="thrperBox">
                    	<p> <span> 3 <sup style="position:absolute; left:18px; top:-5px; float:left;font-size:20px;">%</sup></span><p class="comebackText"> cash  back <br/>on gas </p></p>
                    </div>
                    <div class="lastpar">
                    	<p><span>Plus: Get a 10% customer bonus </span> <br>
                           when you redeem cash back into a  <br>
        				   Bank of America® checking or savings account
                        </p>
                    </div>
                </div>
                <div class="infoLinks">
                	<span><a href="#">Grocery and gas bonus rewards apply to $1,500 in combined purchases each quarter</a>
                    <!--<a href="#"> $1,500 quarterly maximum applies to bonus rewards on grocery and gas purchases</a> &nbsp; | &nbsp;
                           <a href="#"> No expiration on rewards and no rotating categories </a>--></span>
                </div>
            </div>
           
           
            <div class="headrhtcnt"> 
            	<a href="#"> <img src="images/broucher-icon-paperclip2.png" >
                <span>BankAmericard <br> Cash Rewards<sup style="font-size:3px;">TM </sup><br/>Brochure</span></a>
            </div>
            
        </div>        
        <div class="ui-grid-a sidpad">
            <div class="ui-block-contentL">
	            <h2 class="headct">How much do you spend in three months?</h2>
                
                <div class="slideOne">
                   <div data-role="fieldcontain">
                        <form>
    						<label for="slider-2"><span class="span1per"> 1<sup style="margin:0 0 0 -2px; font-size:25px;">%</sup><!--<span class="perspan"> </span>--> </span><span style="text-align:left;">everyday <br />purchases</span></label>
						    <div class="sliderBG">
                            <div class="slider-grid-line"></div>
                            	<div class="dollarText">$</div>
                                <input name="slider-2" id="slider-2" data-highlight="true" min="0" max="10000" value="1039" type="range" data-popup-enabled="true" data-theme="d">
                            </div>
                        </form>
                    </div>                
                </div>
                
                <div class="slideOne">
                   <div data-role="fieldcontain">
                        <form>
    						<label for="slider-3"><span class="span1per"> 2<sup style="margin:0 0 0 -2px; font-size:25px;">%</sup><!--<span class="perspan"></span> --></span><span style="line-height: 25px;">grocery</span></label>
						    <div class="sliderBG">
                            <div class="slider-grid-line"></div>
                            	<div class="dollarText">$</div>
                                <input name="slider-3" id="slider-3" data-highlight="true" min="0" max="5000" value="335" type="range" data-popup-enabled="true" data-theme="b">
                            </div>
                        </form>
                    </div>                
                </div>

                <div class="slideOne">
                   <div data-role="fieldcontain">
                        <form>
    						<label for="slider-4"><span class="span1per">3<sup style="margin:0 0 0 -2px; font-size:25px;">%</sup><!--<span class="perspan"></span>--> </span><span style="line-height: 25px;padding-left: 9px;">gas&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></label>
					      <div class="sliderBG">
                          <div class="slider-grid-line"></div>
                          		<div class="dollarText">$</div>
                          		<input name="slider-4" id="slider-4" data-highlight="true" min="0" max="5000" value="460" type="range" data-popup-enabled="true" data-theme="c">
                          </div>
                        </form>
                    </div>                
                </div>
                <div class="total">Total yearly spending:     <span class="yrttl">$7,4444416 </span></div>
                <div style="clear:both"></div>
                <div class="note"><img src="images/sqrblt.png" style="float:left; margin:0 5px 0 0;">1% cash back. Grocery/Gas bonus rewards on $1,500 in combined purchases each quarter.</div>
                
          </div>
            
            <div class="ui-block-contentR">
            	<!--<img src="images/piechart.png">-->
                <div class="absboxrght">
                    <div class="bluebarRow">
                        <div class="leftbar">
                            <span> $37.68 </span>
                            <div class="bluehighbar">&nbsp;</div>
                        </div>
                        <div class="rightBar">
                            <span> $150.99 </span>
                            <div class="bluehighbarleft">&nbsp;</div>
                        </div>
                        <div style="clear:both"></div>	
                    </div>
    
                    <div class="textbarRow">
                        <div class="leftbartext">
                            <span> Cash back per three <br /> month period </span>
                        </div>
                        <div class="rightBartext">
                            <span> Total cash back for<br />the year </span>
                        </div>
                        <div style="clear:both"></div>	
                    </div>
                    
                    <div class="bulText">
          				<span> Add a 10% customer bonus </span>
                    </div>
				</div>
                
                
            </div>
        </div>
        <div class="ui-grid-b bottomsidpad" style="padding-bottom:5px !important;">
            <div class="foottext">
            	<p>
                This chart is for illustrative purposes only. Your actual rewards earned will depend upon your individual purchases. Start redeeming cash rewards at $25. See associate for additional details.
                </p>
            </div>
            <div class="termcond"><a href="#"> Terms & Conditions </a><span class="plusIco"> <img src="images/plusicon-16x15.png" ></span></div>
        </div>
        
    </div>
 
 
 
 
    <div data-theme="a" data-role="footer" data-position="fixed">
        

        <div class="ui-grid-b footred">
          	<div class="ui-block-a"><a href="#" data-iconpos="right" class="logo"> <img src="images/americard-logo.png" alt="Home"><sup>v2.0</sup> </a></div>
            <div class="ui-block-b"><a href="#" class="fdic">Bank of America, N.A. Member FDIC</a>  </div>
            
            <div class="ui-block-c surblock"><a data-role="button" href="#" class="ui-btn-right transBack survey">Survey</a></div>
           
        </div>
    </div>
</div>

</body>
</html>
